<template>
  <div class="layout-padding">
    <div class="layout-padding-view gdzlzhpj-page">
      <MyMap>
        <ToolWrap position="top-left">
          <BaseMap></BaseMap>
        </ToolWrap>
        <MapSupermapLayer
          url="http://123.127.160.203:8091/iserver/services/map-nercita_cloud/rest/maps/hailun_tr?prjCoordSys={epsgCode:4326}"
        ></MapSupermapLayer>
        <div class="map-card el-card is-always-shadow el-card__body">
          <el-form :model="state.ruleForm" ref="dicDialogFormRef" label-width="80px">
            <el-form-item label="服务目标">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="质量维度">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="质量指标">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="警情类型">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="预警指标">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="指标尺度">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="预警方式">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="预警模型">
              <el-select v-model="state.ruleForm.name" placeholder="请选择">
                <el-option label="Options1" value="1" />
                <el-option label="Options2" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="起始时间">
              <el-date-picker v-model="state.ruleForm.startTime" type="date" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="起始时间">
              <el-date-picker v-model="state.ruleForm.endTime" type="date" placeholder="请选择" />
            </el-form-item>
          </el-form>
          <div class="el-descriptions__title mb20 mt20">预警结果</div>
          <el-table :data="tableData" border>
            <el-table-column prop="date" label="等级" />
            <el-table-column prop="name" label="范围" />
            <el-table-column prop="address" label="标签" />
            <el-table-column prop="address" label="颜色" />
          </el-table>
          <div class="mt20" style="text-align: center">
            <el-space>
              <el-button type="primary">分析</el-button>
              <el-button>重置</el-button>
            </el-space>
          </div>
        </div>
        <div class="map-card"></div>
      </MyMap>
    </div>
  </div>
</template>

<script setup lang="ts" name="trbyyj">
import { MyMap, BaseMap, ToolWrap, MapSupermapLayer } from '@/map';
import { reactive, ref } from 'vue';

const state = reactive({
  ruleForm: {} as any,
});

const tableData = ref([]);
</script>

<style scoped lang="scss">
.map-card {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  overflow: auto;
}
</style>
